<template>
  <div class="my">
    <header>
      <span class="logo">
        <img src="../img/2.gif" alt />
      </span>
      <span>我 的</span>
    </header>
    <main>
      <div class="mask"></div>
      <div class="figure">
        <dl class="information">
          <dt>
            <img :src="url" alt />
          </dt>
          <dd>
            <p>
              <span>{{name}}</span>
            </p>
            <p>{{username}}</p>
          </dd>
        </dl>
        <dl v-for="(item,index) in list" :key="index">
          <dt>
            <van-icon :name="item.icon" />
          </dt>
          <dd>{{item.name}}</dd>
        </dl>
      </div>
      <div class="list">
        <p>
          支付明细
          <span>&gt;</span>
        </p>
      </div>
      <div class="line"></div>
      <div class="lists">
        <p>
          问题反馈
          <span>&gt;</span>
        </p>
      </div>
      <div class="line"></div>
      <div class="lists">
        <p>
          联系客服
          <span>&gt;</span>
        </p>
      </div>
    </main>
    <footer>
      <van-goods-action>
        <van-goods-action-button type="danger" text="退出登录" />
      </van-goods-action>
    </footer>
  </div>
</template>

<script>
import axios from "axios";
import { log } from "util";
export default {
  name: "my",
  data() {
    return {
      list: [
        { name: "我的发布", icon: "newspaper-o" },
        { name: "收藏", icon: "star-o" },
        { name: "浏览历史", icon: "coupon-o" }
      ],
      name: sessionStorage.getItem("name"),
      url: sessionStorage.getItem("url"),
      username: sessionStorage.getItem("username")
    };
  }
};
</script>

<style>
.my {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.my header {
  float: left;
  width: 100%;
  height: 210px;
  background-color: #2997fb;
  text-align: center;
  line-height: 60px;
}

.my header span {
  color: white;
  float: right;
  margin-right: 80px;
}

.my header .logo {
  float: right;
  margin-top: 8px;
  margin-right: 10px;
}

.my main {
  flex: 1;
  overflow-y: auto;
}

.my main .mask {
  width: 100%;
  height: 120px;
  background-color: white;
  border-radius: 90%;
  position: absolute;
  top: 160px;
}

.my main .figure {
  width: 88%;
  height: 150px;
  border: 1px solid #ccc;
  position: absolute;
  top: 100px;
  left: 6%;
  border-radius: 10px;
  background-color: white;
}

.my main .figure .information {
  width: 100%;
  height: 50%;
  border-bottom: 1px #f7f7f7 solid;
  display: flex;
}

.my main .figure .information dt {
  width: 80px;
  height: 100%;
  margin-left: 15px;
}

.my main .figure .information dt img {
  width: 86%;
  height: 86%;
  border-radius: 50%;
  margin-top: 7%;
}

.my main .figure .information dd {
  margin-left: 10px;
}

.my main .figure .information dd p {
  margin-top: 9px;
  padding: 3px 0;
  font-size: 14px;
  color: #737373;
}

.my main .figure .information dd p span {
  font-weight: bold;
  font-size: 16px;
  color: black;
}

.my main .figure dl {
  width: 33%;
  height: 100%;
  float: left;
  text-align: center;
}

.my main .figure dl dt i {
  font-size: 26px;
  margin-top: 10px;
}

.my main .list {
  float: left;
  width: 100%;
  height: 30px;
  /* background-color: red; */
  margin-top: 60px;
  line-height: 30px;
}

.my main .list p {
  margin-left: 30px;
}

.my main .list p span {
  float: right;
  margin-right: 50px;
}

.my main .line {
  width: 100%;
  float: left;
  height: 10px;
  background-color: #f3f3f3;
}

.my main .lists {
  float: left;
  width: 100%;
  height: 40px;
  line-height: 30px;
  line-height: 40px;
}

.my main .lists p {
  margin-left: 30px;
}

.my main .lists p span {
  float: right;
  margin-right: 50px;
}

.my footer {
  width: 100%;
  height: 50px;
}

.my footer .van-goods-action{
  bottom: 55px;
}
</style>